<style lang="less">
</style>

<template>
    <div style="padding-left:80px;">
        <el-form
            :model="queryForm.condition"
            label-width="130px"
            :rules="rules"
            ref="addform"
            label-suffix="："
        >
            <el-row :getter="10" v-if="dataProp === '编辑'">
                <el-col :span="20">
                    <el-form-item :label="$t('projectCategory.projectNumber')" prop="typeCode">
                        <el-input
                            :disabled="dataProp === '编辑'"
                            :placeholder="$t('projectCategory.pleaseEnter')"
                            v-model="queryForm.condition.typeCode"
                            maxlength="32"
                            clearable
                            @change="changeExpert"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :getter="10">
                <el-col :span="20">
                    <el-form-item :label="$t('projectCategory.projectName')" prop="typeName">
                        <el-input
                            :placeholder="$t('projectCategory.pleaseEnter')"
                            v-model="queryForm.condition.typeName"
                            maxlength="32"
                            clearable
                            @change="changeExpert"
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :getter="10">
                <el-col :span="20">
                    <el-form-item :label="$t('projectCategory.remark')" prop="remark">
                        <el-input
                            type="textarea"
                            :rows="5"
                            v-model="queryForm.condition.remark"
                            maxlength="500"
                            :show-word-limit="true"
                        ></el-input>
                        <div>限500字以内</div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-dialog
            width="25%"
            ref="innerDialog"
            :title="$t('graduateBase.prompt')"
            :visible.sync="innerVisible"
            append-to-body
            :top="'28vh'"
        >
            <div style="text-align: left;margin-bottom: 25px;">{{$t('graduateBase.cancelTip')}}</div>
            <div style="text-align: right;">
                <el-button type="primary" @click="confirmInner">{{$t('common.btn.confirm')}}</el-button>
                <el-button @click="cancelInner">{{$t('common.btn.cancel')}}</el-button>
                <el-button
                    type="primary"
                    @click="confirmAndClose"
                >{{$t('graduateBase.saveAndClose')}}</el-button>
            </div>
        </el-dialog>
        <el-row type="flex" class="row-bg" justify="end">
            <el-button @click="cancelDialog">{{$t('projectCategory.cancel')}}</el-button>
            <el-button type="primary" @click="conserve">{{$t('projectCategory.save')}}</el-button>
        </el-row>
    </div>
</template>

<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import graduateStudent from 'common/src/api/graduateStudent/graduateStudent'
import interAcaConference from 'common/src/api/internationalCommunication/interAcaConference'

export default {
    props: {
        dataList: {
            type: String
        },
        dataProp: {
            type: String
        },
        dataListProp: {
            type: Object
        },
        dataQueryForm: {
            type: Object
        },
        addflag: {
            type: Boolean
        },
        agent: {
            type: Boolean,
            default: false,
            required: false
        },
        admin: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    data() {
        return {
            dataList: [],
            fileList: [],
            textarea: '',
            remark: '',
            queryForm: {
                condition: {
                    typeCode: '',
                    typeName: '',
                    remark: ''
                }
            },
            innerVisible: false,
            id: '',
            restaurants: [],
            formsLearn: [],
            options: {
                facultys: [],
                timeList: [],
                title: []
            },
            listName: '',
            pickerOptionsStart: {
                disabledDate: time => {
                    let endDateVal = this.queryForm.effectEndDate
                    if (endDateVal) {
                        return time.getTime() > new Date(endDateVal).getTime()
                    }
                }
            },
            pickerOptionsEnd: {
                disabledDate: time => {
                    let beginDateVal = this.queryForm.effectStartDate
                    if (beginDateVal) {
                        return time.getTime() <= new Date(beginDateVal).getTime() - 86400000
                    }
                }
            },
            rules: {
                typeCode: [
                    { required: true, message: this.$t('projectCategory.pleaseEnterNumber'), trigger: 'blur' },
                    { validator: this.checkSpecial, trigger: 'blur' }
                ],
                typeName: [
                    { required: true, message: this.$t('projectCategory.pleaseEnterName'), trigger: 'blur' },
                    { validator: this.checkSpecial, trigger: 'blur' }
                ],
                remark: [{ validator: this.checkSpecial2, trigger: 'blur' }]
            }
        }
    },
    watch: {
        dataListProp: {
            handler: function(newV, oldV) {
                if (this.dataProp == '编辑') {
                    this.queryForm.condition = this.dataListProp
                } else {
                    this.queryForm.condition.typeName = ''
                    this.queryForm.condition.remark = ''
                }
            },
            deep: true,
            immediate: true
        }
    },
    mounted() {
        this.getOptions()
    },
    methods: {
        // 过滤$符号
        checkSpecial(rule, value, callback) {
            let regEn = /[`$]/im
            if (regEn.test(value)) {
                return callback(new Error(this.$t('identificationToDoList.cannotContain')))
            } else if (value === '') {
                return callback()
            } else {
                return callback()
            }
        },

        // 过滤$符号
        checkSpecial2(rule, value, callback) {
            let regEn = /[`$]/im
            if (regEn.test(value)) {
                return callback(new Error(this.$t('identificationToDoList.cannotContain')))
            } else if (value === '') {
                return callback()
            } else {
                return callback()
            }
        },

        getOptions() {
            // 筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['profession', 'G_XBIE']
            }
            queryDic(data).then(res => {
                UTILS.fillSelect(
                    {
                        title: 'profession'
                    },
                    res.data,
                    this.options
                )
            })
        },

        // 内层弹出确定
        confirmInner() {
            this.dataListProp = {}
            this.listName = ''
            this.$refs['addform'].resetFields()
            for (let key in this.queryForm.condition) {
                this.queryForm.condition[key] = ''
            }
            this.innerVisible = false
            this.$emit('cancel-dialog', false)
        },
        // 内层弹出取消
        cancelInner() {
            this.innerVisible = false
        },
        // 内层弹出保存关闭
        confirmAndClose() {
            this.innerVisible = false
            this.conserve()
        },
        // 取消
        cancelDialog() {
            this.$refs['addform'].resetFields()
            this.$emit('cancel-dialog', false)
        },

        // 保存
        conserve() {
            this.$refs['addform'].validate(valid => {
                if (valid) {
                    if (this.dataProp === '新增') {
                        this.$emit('affirm-form', this.queryForm.condition, this.dataQueryForm)
                    } else {
                        this.queryForm.condition.id = this.dataListProp.id
                        this.$emit('affirm-form', this.queryForm.condition, this.dataQueryForm)
                    }
                }
            })
        }
    }
}
</script>
